<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="keyword" size="mini" placeholder="筛选登录名" class="handle-input mr10"></el-input>
                <el-button type="primary"  size="mini"  @click="query">筛选</el-button>
                <el-button type="danger"  size="mini"  @click="handleClearAllLog">清空日志</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                <el-table-column type="index" label="序号" align="center" width="50"/>
                    <el-table-column prop="fdLoginName" label="登录用户" sortable width="150"/>
                    <el-table-column prop="fdIp" label="IP地址" sortable width="150"/>
                    <el-table-column prop="fdLocation" label="登录地址" sortable width="150"/>
                    <el-table-column prop="fdBrowser" label="浏览器" sortable width="150"/>
                    <el-table-column prop="fdComputer" label="操作系统" sortable width="150"/>
                    <el-table-column prop="fdStatus" label="状态" sortable width="150"/>
                    <el-table-column prop="fdMsg" label="内容"  />
                    <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
        </div>
    </div>
</template>

<script>
    import dateUtil from '@/utils/dateUtils';
    export default {
        name: 'SysLogLoginMainList',
        data() {
            return {
                tableData:{
                    keyword: '',
                    size:0,
                    total:0,
                    current:1,
                    records: []
                },
                keyword: ''
            }
        },
        created() {
            this.getData();
        },
        methods: {
            add() {
                let routeUrl = this.$router.resolve({
                    path: "/form/sys/log/sys_log_login_main/edit",
                    query: {}
                });
                window.open(routeUrl.href, '_blank');
            },
            getData() {
                this.$post('/api/sys/log/sys_log_login_main/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            handleClearAllLog() {
              this.$confirm('此操作将清空所有登录日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$post('/api/sys/log/sys_log_login_main/clearAllLog',{
                }).then((res) => {
                    this.tableData.records = [];
                    this.tableData.total =0;
                    this.$message({
                      type: 'success',
                      message: '日志清空成功!'
                    });
                });
                
              })
            }
        }
    }
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
